New Relic Browser に npm package でのインストール方法がやってきた！

#New Relic

Yuzuru Ohira

2023.04.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

New Relic の Browser Monitoring のインストール方法に npm package でのインストール方法がリリースされていたのでその紹介をするための記事になります。

リリースノートや公式の Github はこちらを参照してください！

リリースノート

https://github.com/newrelic/newrelic-browser-agent

従来は APM Agent からの自動挿入かスニペットを Copy/Paste する方法のどちらかで特に React を代表する SPA の場合には後者を使う必要がありました。この導入方法にはいくつか課題がありバージョン更新の際にスニペットを更新する必要があるのですがスニペットの中で環境変数などを設定したものを再度置換するなどの作業が発生するのでそれなりに手間がかかっていました。今回の npm package でのインストール方法のリリースによりアップデート周りも簡単にできそうでしたのでご紹介します！

New Relic のアカウント登録

まず前提として New Relic のアカウント登録を済ませておく必要があります。 New Relic は月間 100GB までのデータ転送(TDP といいます)に関しては１Userであれば原則すべての機能を無料で利用することができるので基本検証目的であれば無料で使うことができます。

https://newrelic.com/signup

New Relic で新規アプリケーションの作成

先にアプリケーションに組み込む前に New Relic 側での作業が必要になります。作成したアカウントにログインして頂いて左側のサイドバーより Add Data → Browser Monitoring を選択 その後は導入するアカウントを選択すると画面遷移し選択項目がでてくるのですが以下のように設定してください。

Choose a deployment method
- Copy/Paste Javascript code を選択
Configure your instrumentation
- こちらはトグル選択になっていますがお好みの設定をしてください
Name your app
- お好みの名前をつけてください

すべての設定が完了すると Script が生成されますのでお手元に保存をしておいてください。後ほど利用します。

これらの設定が完了すると New Relic 側での設定は完了しましたので実際にプロジェクト側に導入していきます。

npm package の導入

npm か yarn でパッケージの導入をします。

$ npm install @newrelic/browser-agent --save

$ yarn add @newrelic/browser-agent

アプリケーション側で最初に呼ばれる index.js(ts) のファイルに Browser Agent を呼び出す記述をします。以下サンプルの設定になります。

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'

// コピーしたスニペットの NREUM オブジェクトの内容をこちらに貼り付ける。
// 必要に応じて環境変数にしておくと便利
const options = {
  init: { ... }, // NREUM.init
  info: { ... }, // NREUM.info
  loader_config: { ...} // NREUM.loader_config
}

new BrowserAgent(options)

これを設定した状態でアプリケーションを起動して画面などをクリックして New Relic 側に転送されれば成功です！

New Relic Browser がどのように見えるかは以下の記事を見て頂くとイメージが付きやすいかと思いますので URL をシェアします。

New RelicでEC2上のWebページをブラウザモニタリングをしてみた

アップデートについてですが package.json のバージョンを最新にして頂ければ新しいバージョンに更新されますのでスニペットを張り替えて更新するしかなかった時よりも更に便利になっていますね。

また個別の機能のオン・オフも対応しているようで必要な機能のみを使うということも可能なようです(便利だ) https://github.com/newrelic/newrelic-browser-agent#composing-a-custom-agent-with-selected-feature-modules